<template>
  <transition name = "fade"  > 
    <div class="rain-toast" v-if="visible" >
      <img v-if="type == 'loading'"  class="rain-toast__loading" src="../assets/loading.gif">
      <div class="rain-toast__text" >{{message}}</div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Home extends Vue {
  // data
  visible = false
  message = ''
  duration = 2000
  timer:any = null
  type:any = 'info'
  // method
  clearTimer() {
    clearTimeout(this.timer);
  }
  startTimer() {
    if (this.duration > 0) {
      this.timer = setTimeout(() => {
         this.visible = false
      }, this.duration);
    }
  }
  close(){
    this.visible = false
  }
  // mounted
  mounted() {
   this.startTimer() 
  }
}
</script>
<style lang="scss" scoped>
@import "../scss/toast.scss";
</style>